<template>
    <div id="roleMgt">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="角色名：">
                <el-input v-model.trim="searchForm.name" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getRoleHandle">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="showAddRole">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tbpg.tableData" border height="611">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="id" label="ID" v-if="false"></el-table-column> 
            <el-table-column prop="name" label="角色名"></el-table-column>
            <el-table-column prop="remark" label="描述"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="stateName" label="状态"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEditRole(scope.row)">编辑</el-button>
                    <el-button type="text" @click="changeRoleStateHandle(scope.row.id)">{{ showbtnText(scope.row.state) }}</el-button>
                </template>    
            </el-table-column>
        </el-table>
        
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination>    
        <el-dialog :title="title" :visible.sync="addRoleVisible" width="600px" @close="cancel" :close-on-click-modal="false">
            <el-form ref="addOrEditRoleForm" :model="addOrEditRoleForm" :rules="addOrEditRoleRules" label-width="100px">
                <el-form-item label="角色名：" prop="name">
                    <el-input v-model.trim="addOrEditRoleForm.name" maxlength="10" clearable></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="remark">
                    <el-input v-model.trim="addOrEditRoleForm.remark" maxlength="30" clearable></el-input>
                </el-form-item>
                <el-form-item label-width="0" prop="menuId" class="roleTabs">
                    <el-tabs tab-position="left">
                        <el-tab-pane v-for="firstMenu in menuList" :label="firstMenu.name" :key="firstMenu.name">
                            <el-checkbox-group v-model="addOrEditRoleForm.menuId">
                                <el-checkbox v-for="secondMenu in firstMenu.bodyMenus" :label="secondMenu.id" :key="secondMenu.id">{{ secondMenu.name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addOrEidtRoleHandle">确 定</el-button>
            </div> 
        </el-dialog> 
    </div>
</template>

<script>
import {addRole, getRoleListPage, editRoleInfo, changeRoleState, getMenuList} from '@/api/user.js'
import common from '@/utils/common.js'
export default {
    data(){
        return {
            searchForm: {
                name: ''
            },
            addOrEditRoleForm: {
                name: '',
                remark: '',            
                menuId: []
            },
            title: '新增角色',
            roleId: null,
            addRoleFlag: true,
            menuList: [],
            addRoleVisible: false,
            disable: true,    
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0
            },       
            addOrEditRoleRules: {
                name: [
                    {required: true, message: '请输入新增角色名', trigger: 'blur'}
                ],
                menuId: [
                    {required: true, message: '请选择至少一个菜单', trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        cancel(){
            this.addRoleVisible = false;
            this.addRoleFlag = true;
            this.$refs.addOrEditRoleForm.resetFields();  
        },
        showbtnText(state){
            return common.showTxtByState(state, {0: '启用', 1: '禁用'})
        }, 
        getRoleHandle($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);        
            getRoleListPage(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddRole(){
            this.title = '新增角色';
            this.addRoleVisible = true;
            this.addRoleFlag = true;
            getMenuList({}).then(res => {
                this.menuList = res.data.data;
            })
        },
        showEditRole(row){
            this.title = '修改角色';
            this.addRoleVisible = true;
            this.addRoleFlag = false;
            this.roleId = row.id;
            getMenuList({'roleId': row.id}).then(res => {
                var result = res.data;
                this.addOrEditRoleForm.name = row.name;
                this.addOrEditRoleForm.remark = row.remark;
                this.menuList = result.data;

                result.data.forEach((firstMenu) => {
                    firstMenu.bodyMenus.forEach((secondMenu) => {
                        if(secondMenu['isCheck'] == 1){
                            this.addOrEditRoleForm.menuId.push(secondMenu['id'])
                        }
                    })
                })
            })
        },
        addOrEidtRoleHandle(){
            this.$refs.addOrEditRoleForm.validate(valid => {
                if(valid){
                    var data = JSON.parse(JSON.stringify(this.addOrEditRoleForm));
                    data.menuId = data.menuId.join('_'); 
                    if(this.addRoleFlag){
                        addRole(data).then(res => callback(res))
                    }else{
                        data.id = this.roleId;
                        editRoleInfo(data).then(res => callback(res))                        
                    }
                }
                var _this = this;
                function callback(res){
                    if(res.data.code == 200){
                        _this.getRoleHandle();
                        _this.addRoleVisible = false;
                        
                    }else{
                        _this.$message.error(res.data.message)
                    }                     
                }
            })
                        
        },
        changeRoleStateHandle(id){
            changeRoleState({'id': id}).then(res => {
                if(res.data.code == 200){
                    this.$message.success(res.data.message)
                    this.getRoleHandle();
                }else{
                    this.$message.error(res.data.message);
                }
            })
        },
        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getRoleHandle();
        },
        handleCurrentChange(val){            
            this.tbpg.currentPage = val;
            this.getRoleHandle();
        }
    },
    created(){
        this.getRoleHandle();
    }
}
</script>

<style lang="scss" >
.roleTabs {
    .el-tabs__content {
        padding-left: 25px;
        label.el-checkbox {
            width: 25%;
        }
    }
    .el-form-item__error {
        left: 140px;
    }
}
</style>

